<html>

<head>
    <title>HTML 文档结构 </title>
</head>


<body>
    <!-- <center><font color= ”red”>Welcome to Web Site</font></center>  -->
    <div class="group">

        <input type="test" placeholder="please input todo item" name="todoValueName" onkeydown="valueChange(event)"
            id="todoValueId" class="todovalue"></input>
        <!-- <button type="button" id="bu1">bu1</button>
        <input type="button" value="bu3" onclick="handClick()"></input> -->
        <div id="todolist">
            <div class="item" id="item0">
                <input class="item-chk" type="checkbox">    
                <div class="item-sp">item 1</div>
                <button class="item-del" id="item-del-0" type="button" onclick="handDelete(0)">delete</button>
            </div>
            <div class="item" id="item1">
                <input class="item-chk" type="checkbox">    
                <div class="item-sp">item 2</div>
                <button class="item-del" id="item-del-1" type="button" onclick="handDelete(1)">delete</button>
            </div>
            <div class="item" id="item2">
                <input class="item-chk" type="checkbox">    
                <div class="item-sp">item 3</div>
                <button class="item-del" id="item-del-2" type="button" onclick="handDelete(2)">delete</button>
            </div>
        </div>
    </div>

</body>

<script lang="javascript">
    //alert("test")
    // var index=1;
    function init() {
        document.getElementById("bu1").onclick = handClick;
    }

    function valueChange(e) {
        console.log(e);
        if (event.keyCode == 13) {
            handClick();
        }
    }

    function handClick() {
        var temp = document.getElementsByName("todoValueName")[0].value;
        // alert("hello world    "+index++  );
        // var t = document.getElementById("todolist").innerHTML;
        // document.getElementById("todolist").innerHTML = t + "<div>"+temp+"</div>";
        var crediv = document.createElement("div");
        crediv.innerText = temp;
        document.getElementById("todolist").append(crediv);
    }

    function test1(index){
        // console.log("111");
        // document.getElementById("todolist").children[index].style = "background-color:#dedede";
        // document.getElementById("item-del-"+index).style= "opacity :1;";
    }

    function test2(index){
        // console.log("222");
        // document.getElementById("todolist").children[index].style = "background-color:white";
        // document.getElementById("item-del-"+index).style= "opacity :0;";
    }

    function handDelete(index){
        var arr=document.getElementById("todolist");
        document.getElementById("item"+index).remove();
    }
    init();
</script>

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .group {
        border: 1px solid rgb(240, 141, 12);
        padding: 10px;
        border-radius: 4px;
    }

    .item{
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;

    }

    .item:hover{
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        background-color: #dedede;
    }
    .item-sp{
        flex-grow: 1;
    }

    .item-del{
        border: 0px ;
        display: flex;
        background-color: rgb(199, 45, 25);
        border-radius : 4px;
        color: aliceblue;
        opacity: 0;
    }

     .item:hover .item-del{
        opacity: 1;
    }
    .todovalue{
        border: 1px solid #333333;
        padding: 3px;
        outline:none;
    }
    .todovalue:focus{
        box-shadow: 0px 0px 5px #1163df;
        border: 1px #1163df;
        outline:none;
    } 
</style>

</html>